<template>
<header id="box_top" class="pageHeader c_border">
	<div class="wrap fix">
		<h1 class="logo">
			<nuxt-link to="/"><img src="~assets/img/logo.png"></nuxt-link>
		</h1>
		<nav class="pageNav">
			<ul v-if="!$store.state.token">
				<li v-for="(nav, index) in navs" :key="index">
					<nuxt-link :to="nav.path" :class="{'active': nav.routerName === $route.name}">{{ nav.name }}</nuxt-link>
				</li>
			</ul>
			<ul v-else>
				<li v-for="(nav, index) in navs_login" :key="index">
					<nuxt-link :to="nav.path" :class="{'active': nav.routerName === $route.name}">{{ nav.name }}</nuxt-link>
				</li>
			</ul>
		</nav>
		<ul class="links">
			<li v-if="!$store.state.token"><el-button type="primary" size="small" @click="showlogin">登录</el-button></li>
			<li v-else><el-button type="primary" size="small" plain  @click="logout">退出</el-button></li>
		</ul>
	</div>

	<Sooclogin ref="sooclogin"></Sooclogin>

</header>
</template>
<script>
export default {
	data() {
		return {
			navs: [
				{
					path: '/',
					routerName: 'index',
					name: '首页'
				},
				{
					path: '/list',
					routerName: 'list-id',
					name: '列表'
				}
			],
			navs_login: [
				{
					path: '/',
					routerName: 'index',
					name: '首页'
				},
				{
					path: '/list',
					routerName: 'list-id',
					name: '列表'
				},
				{
					path: '/publish',
					routerName: 'publish-id',
					name: '发布内容'
				}
			]
    	}
	},
	methods: {
		showlogin(){
			this.$refs.sooclogin.boxshow();
		},
		logout() {
			this.$confirm('确认退出登录？').then(_ => {
				this.$store.dispatch('LOGOUT').then(data => {
					if (data.success) {
						this.$store.state.loginstatus = false;
						this.$store.state.token = ''
						this.$router.push('/')
					}
				})
			}).catch(_ => {
				console.log('取消');
			});
			
    	}
	}
}

</script>
<style lang="postcss">
.c_border {
	border-bottom:2px solid #409EFF;
}
.pageHeader {
	& .logo,
	& .pageNav,
	& .pageNav ul > li,
	& .links li {
		float:left;
	}
	& .logo {
		margin-right:7%;
		& img { 
			height:65px;
		}
	}
	& .pageNav ul > li {
		height:65px;
		line-height:65px;
		& > a {
			display: block;
			padding: 0 25px;
			font-size: 14px;
		}
		& > a.active {
			color:#409EFF;
			font-weight:bold;
		}
	}
	& .links {
		float:right;
		padding-top:18px;
		& li {
			margin-left:15px;
		}
		& a {
			display:block;
		}
	}
}

.login_box {
	& .el-input {
		margin-bottom:10px;
	}
	& .el-button { 
		width:100%;
	}
}
</style>
